<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>采购订单</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
<div class="layui-btn-container common">
    <button type="button" id="btnAdd" class="layui-btn">增加</button>
    <button type="button" id="btnEdit" class="layui-btn">编辑</button>
    <button type="button" id="btnDel" class="layui-btn">删除</button>
    <button type="button" id="btnSave" class="layui-btn layui-btn-disabled">保存</button>
    <button type="button" id="btnCancel" class="layui-btn layui-btn-disabled">取消</button>
</div>
<form class="layui-form layui-form-pane" action="" method="post">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">单据编号：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="cVouchCode" name="cVouchCode" readonly class="layui-input" v-model="cVouchCode">
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">日期：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dDate" id="dDate" autocomplete="off" class="layui-input" v-model="dDate">
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商：</label>
                    <div class="layui-input-inline">
                        <input type="hidden" id="iVendorID" name="iVendorID" v-model="iVendorID" />
                        <input type="text" id="cVenName" name="cVenName" placeholder="请选择供应商" autocomplete="off"
                               class="layui-input" v-model="vendorDTO.cVenName">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">部门：</label>
                    <div class="layui-input-inline">
                        <input type="hidden" id="iDepartmentID" name="iDepartmentID" v-model="iDepartmentID" />
                        <input type="text" id="cDepName" name="cDepName" placeholder="请选择部门" autocomplete="off"
                               class="layui-input" v-model="departmentDTO.cDepName" >
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">人员：</label>
                    <div class="layui-input-inline">
                        <input type="hidden" id="iPersonID" name="iPersonID" v-model="iPersonID" />
                        <input type="text" name="cPersonName" id="cPersonName" placeholder="请选择人员" autocomplete="off"
                               class="layui-input" v-model="personDTO.cPersonName" >
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">备注：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="cMemo" name="cMemo" class="layui-input" v-model="cMemo">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md12">
                <button type="button" id="btnAddRow" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-disabled"><i class="layui-icon"></i>
                </button>
                <button type="button" id="btnDelRow" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-disabled"><i class="layui-icon"></i>
                </button>
                <button type="button" id="btnModifyRow" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-disabled"><i class="layui-icon"></i>
                </button>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md12">
                <table class="layui-hide" id="detailGrid" lay-filter="detailGrid"></table>
            </div>
        </div>
    </div>
</form>
<!-- Required Javascript -->
<script src="/js/vue.min.js"></script>
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.validate.min.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/layui/extend/tableSelect.js"></script>

<script>
    var data=${data};
    // console.log(data);

    var vv=new Vue ({
        el:".layui-form",
        data:data
    });

    var form = layui.form;
    form.render();

    var laydate = layui.laydate;
    laydate.render({
        elem: '#dDate'
    });

    //开始使用
    var tableSelect = layui.tableSelect;
    tableSelect.render({
        elem: '#cVenName',	//定义输入框input对象 必填
        checkedKey: 'iID', //表格的唯一建值，非常重要，影响到选中状态 必填
        searchKey: 'cVenName',	//搜索输入框的name值 默认keyword
        searchPlaceholder: '按供应商名称搜索',	//搜索输入框的提示文字 默认关键词搜索
        table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
            url: '/vendor/getListWithPage',
            cols: [[
                {type: 'radio'}
                , {field: 'iID', width: 80, title: 'ID', sort: true}
                , {field: 'cVenCode', width: 150, title: '供应商编码'}
                , {field: 'cVenName', width: 150, title: '供应商名称', sort: true}
            ]],
            page: true,
            limit: 10
        },
        done: function (elem, data) {
            //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
            //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
            //console.log(data);
            layui.each(data.data, function (index, item) {
                $('#iVendorID').val(item.iID);
                $('#cVenName').val(item.cVenName);
            });
        }
    });
    tableSelect.render({
        elem: '#cDepName',	//定义输入框input对象 必填
        checkedKey: 'iID', //表格的唯一建值，非常重要，影响到选中状态 必填
        searchKey: 'cDepName',	//搜索输入框的name值 默认keyword
        searchPlaceholder: '按部门名称搜索',	//搜索输入框的提示文字 默认关键词搜索
        table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
            url: '/department/getListWithPage',
            cols: [[
                {type: 'radio'}
                , {field: 'iID', width: 80, title: 'ID', sort: true}
                , {field: 'cDepCode', width: 150, title: '部门编码'}
                , {field: 'cDepName', width: 150, title: '部门名称', sort: true}
            ]],
            page: true,
            limit: 10
        },
        done: function (elem, data) {
            //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
            //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
            //console.log(data);
            layui.each(data.data, function (index, item) {
                $('#iDepartmentID').val(item.iID);
                $('#cDepName').val(item.cDepName);
            });
        }
    });
    tableSelect.render({
        elem: '#cPersonName',	//定义输入框input对象 必填
        checkedKey: 'iID', //表格的唯一建值，非常重要，影响到选中状态 必填
        searchKey: 'cPersonName',	//搜索输入框的name值 默认keyword
        searchPlaceholder: '按部门名称搜索',	//搜索输入框的提示文字 默认关键词搜索
        table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
            url: '/person/getListWithPage',
            cols: [[
                {type: 'radio'}
                , {field: 'iID', width: 80, title: 'ID', sort: true}
                , {field: 'cPersonCode', width: 150, title: '人员编码'}
                , {field: 'cPersonName', width: 150, title: '人员名称', sort: true}
            ]],
            page: true,
            limit: 10
        },
        done: function (elem, data) {
            //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
            //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
            //console.log(data);
            layui.each(data.data, function (index, item) {
                $('#iPersonID').val(item.iID);
                $('#cPersonName').val(item.cPersonName);
            });
        }
    });
    //默认值 只需要在触发input上添加 ts - selected="1,2,3" 属性即可 值需与checkedKey对应

    //监听提交
    form.on('submit(formDemo)', function (data) {
        //console.log(data);

        $.ajax({
            type: "POST",
            data: data.field,
            dataTypeString: "json",
            async: false,
            url: "/vendor/create",
            success: function (msg) {
                if (msg.code == "0") {
                    //当你在iframe页面关闭自身时
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                }
            }
        });
        //console.log(data);
        return false;
    });
</script>

<script>
    // console.log(data.PuOrderDetails);
    var table = layui.table;
    table.render({
        elem: '#detailGrid'
        , data:data.PuOrderDetails
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
            {checkbox: true}
            , {field: 'iID', width: 80, title: 'ID', sort: true}
            , {field: 'cInvCode',width: 100,title: '存货编码', sort: true, templet:'<div>{{d.inventoryDTO.cInvCode}}</div>'}
            , {field: 'cInvName',width: 100,title: '存货名称', sort: true, templet:'<div>{{d.inventoryDTO.cInvName}}</div>'}
            , {field: 'iQuantity', width: 150, title: '数量', sort: true}
            , {field: 'iUnitPrice', width: 150, title: '单价', sort: true}
            , {field: 'iMoney', width: 150, title: '金额', sort: true}
        ]]
        , id: 'detailGrid'
        , page: false
        , limit: 10
        // , method: 'post'  //提交方式
        , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        , defaultToolbar: ['filter', 'exports', 'print'] //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
    });
</script>
<script>
    //新增按钮
    $('#btnAdd').on('click', function (e) {
        if ($("#btnAdd").hasClass("layui-btn-disabled"))
        {
            return;
        }

        $("#btnAdd").addClass("layui-btn-disabled");
        $("#btnEdit").addClass("layui-btn-disabled");
        $("#btnDel").addClass("layui-btn-disabled");
        $("#btnSave").removeClass("layui-btn-disabled");
        $("#btnCancel").removeClass("layui-btn-disabled");
        $("#btnAddRow").removeClass("layui-btn-disabled");
        $("#btnDelRow").removeClass("layui-btn-disabled");

        $.get("/puorder/get", { id: 0 },
            function(d){
                data=d;
                console.log(d);
                console.log(data);
                window.data.cVouchCode="asdf";
            });
        // var myDate = new Date;
        // data.dDate=myDate.getDate();
    });

    $('#btnEdit').on('click', function (e) {
        if ($('#btnEdit').hasClass("layui-btn-disabled"))
        {
            return;
        }

        $("#btnAdd").addClass("layui-btn-disabled");
        $("#btnEdit").addClass("layui-btn-disabled");
        $("#btnDel").addClass("layui-btn-disabled");
        $("#btnSave").removeClass("layui-btn-disabled");
        $("#btnCancel").removeClass("layui-btn-disabled");
        $("#btnAddRow").removeClass("layui-btn-disabled");
        $("#btnDelRow").removeClass("layui-btn-disabled");

        $.get("/puorder/get", { id: data.iID },
            function(data){
                alert("Data Loaded: " + data);
            });
        // layer.open({
        //     type: 2,
        //     id: "WarehouseEdit",
        //     title: '修改仓库',
        //     maxmin: true,
        //     shadeClose: true, //点击遮罩关闭
        //     area: ['800px', '520px'],
        //     content: '/puorder/get?id='+data.iID,
        //     end: function () {
        //         table.reload('detailGrid', {});
        //     }
        // });
    });

    $('#btnDel').on('click', function () {
        var checkStatus = table.checkStatus('detailGrid')
            , data = checkStatus.data;
        //console.log(data[0].iID);
        //var jsonObj = JSON.parse(data);//转换为json对象
        //console.log(jsonObj);
        if (data.length = 0) {
            //配置一个透明的询问框
            layer.msg('当前采购订单信息已为空。', {
                time: 5000, //20s后自动关闭
                btn: ['确认']
            });
            return;
        }

        if (data.length > 1) {
            //配置一个透明的询问框
            layer.msg('请只选择一个要删除的仓库。', {
                time: 5000, //20s后自动关闭
                btn: ['确认']
            });
            return;
        }

        layer.confirm('是否要删除当前所选择的仓库？', {
            btn: ['确认', '取消'] //可以无限个按钮
        }, function (index, layero) {
            var checkStatus = table.checkStatus('warehouseGrid')
                , data = checkStatus.data;
            var ids = [];
            for (var i = 0; i < data.length; i++) {
                ids.push(data[i].iID);
            }

            //按钮【确认】的回调
            $.ajax({
                type: "POST",
                data: JSON.stringify(ids),//"id=" + ids.toString(),
                dataType: "json",
                contentType: 'application/json;charset=utf-8',
                async: false,
                url: "/warehouse/deleteList",
                success: function (msg) {
                    if (msg.code == "0") {
                        table.reload('warehouseGrid', {
                            //url: '/api/table/search'
                            //, where: {} //设定异步数据接口的额外参数
                            //,height: 300
                        });
                    } else {
                        layer.msg('错误号：' + msg.code + ' 错误信息：' + msg.msg, {icon: 2});
                    }
                }
            });
            layer.close(index);
        }, function (index, layro) {
            //按钮【取消】的回调
        });
    });

    $('#btnSave').on('click', function () {
        if ($('#btnSave').hasClass("layui-btn-disabled"))
        {
            return;
        }

        $("#btnAdd").removeClass("layui-btn-disabled");
        $("#btnEdit").removeClass("layui-btn-disabled");
        $("#btnDel").removeClass("layui-btn-disabled");
        $("#btnSave").addClass("layui-btn-disabled");
        $("#btnCancel").addClass("layui-btn-disabled");
        $("#btnAddRow").addClass("layui-btn-disabled");
        $("#btnDelRow").addClass("layui-btn-disabled");
    });

    $('#btnCancel').on('click', function () {
        if ($('#btnCancel').hasClass("layui-btn-disabled"))
        {
            return;
        }

        $("#btnAdd").removeClass("layui-btn-disabled");
        $("#btnEdit").removeClass("layui-btn-disabled");
        $("#btnDel").removeClass("layui-btn-disabled");
        $("#btnSave").addClass("layui-btn-disabled");
        $("#btnCancel").addClass("layui-btn-disabled");
        $("#btnAddRow").addClass("layui-btn-disabled");
        $("#btnDelRow").addClass("layui-btn-disabled");
    });
</script>
</body>
</html>
